.loading-marks {
  position: absolute;
  z-index: 99999999;
  background: rgba(0, 0, 0, .6);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .3s;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 5rem;
    height: 5rem;

  }

  .laoding-an {
    animation: laodingAn 1s ease-in-out infinite forwards;
  }
}


.no-sliding{
  position: absolute;
  z-index: 999999;
  background: rgb(255, 0, 0);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}


.tips-marks {
  position: absolute;
  z-index: 99999999;
  background: rgba(0, 0, 0, .6);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .3s;
  display: flex;
  justify-content: center;
  align-items: center;
  .tips-box{
    width: 90%;
    height: 20rem;
    background: #fff;
    border-radius: 2rem;
    margin-top: -10rem;
    .title{
      width: 100%;
      height: 8rem;
      line-height: 8rem;
      font-size: 2.5rem;
      font-weight: 600;
      color:#333;
    }
    p{
      margin-top: 1rem;
      font-size: 2.1rem;
      color:#999;
    }
    .btn-close{
      width: 100%;
      height: 5.5rem;
      // background: #f00;
      margin-top: 3rem;
      border-top:1px solid #eee;
      font-size: 2.5rem;
      line-height: 5.5rem;
    }
  }
}






@keyframes laodingAn {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg);
  }
}


.swiper-slide4 {
//   background: url('../assets/images/bill2022/2/bg.png');
//   background-size: 100% 100%;
//   background-position: center center;
  position: relative;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide4-img {
    width: 100%;
    height: 55.875rem;
    margin-top: 6rem;
    // position: absolute;
    //     bottom: 0;
  }
}

.swiper-slide5 {
//   background: url('../assets/images/bill2022/2/bg.png') no-repeat;
//   background-size: 100% 100%; 
  position: relative;
  overflow: hidden;
  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide5-img {
    // position: absolute;
    //     bottom: 0;
  }

  .rank-one {
    width: 13.75rem;
    height: 8.375rem;
    background: linear-gradient(180deg, #fff1f1, #ffffff);
    border-radius: 0 1rem 1rem 0;
    backdrop-filter: blur(0.375rem);
    transform: translateX(-13.75rem);
    position: absolute;
    top: 38rem;
    left: 0%;
    display: flex;
    align-items: center;
    padding: 0 0 0 1.5rem;
    box-sizing: border-box;

    .num {
      font-weight: 600;
      color: #ff674f;
      font-size: 3.75rem;
    }

    .icon {
      width: 100%;
      height: 6rem;
      margin-left: 1.5rem;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }

      span {
        font-size: 1rem;
        margin-top: .5rem;
      }
    }
  }

  .rank-tow {
    width: 15.625rem;
    height: 8.375rem;
    background: linear-gradient(180deg, #fff1f1, #ffffff);
    border-radius: 0 1rem 1rem 0;
    transform: translateX(-15.625rem);
    backdrop-filter: blur(0.375rem);
    position: absolute;
    top: 48rem;
    left: 0%;
    display: flex;
    align-items: center;
    padding: 0 0 0 1.5rem;
    box-sizing: border-box;

    .num {
      font-weight: 600;
      color: #ff674f;
      font-size: 3.75rem;
    }

    .icon {
      width: 100%;
      height: 6rem;
      margin-left: 1rem;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }

      span {
        font-size: 1rem;
        margin-top: .5rem;
      }
    }
  }

  .rank-three {
    width: 17.8125rem;
    height: 8.375rem;
    background: linear-gradient(180deg, #fff1f1, #ffffff);
    border-radius: 0 1rem 1rem 0;
    transform: translateX(-17.8125rem);
    backdrop-filter: blur(0.375rem);
    position: absolute;
    top: 58rem;
    left: 0%;
    display: flex;
    align-items: center;
    padding: 0 0 0 1.5rem;
    box-sizing: border-box;

    .num {
      font-weight: 600;
      color: #ff674f;
      font-size: 3.75rem;
    }

    .icon {
      width: 100%;
      height: 6rem;
      margin-left: 1rem;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }

      span {
        font-size: 1rem;
        margin-top: .5rem;
      }
    }
  }
}

.swiper-slide6 {
//   background: url('../assets/images/bill2022/3/bg.png') no-repeat;
  background-size: 100% auto;
  background-position: center center;
  position: relative;
  overflow: hidden;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height:20rem;
    margin-top: 3rem;
    text-align: left;
    position: relative;
    z-index: 999;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .article-img {
    width: 100%;
    height: 62.8125rem;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    margin-top: 8.5rem;

    // position: absolute;
    // bottom: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }
}


.swiper-slide7 {
//   background: url('../assets/images/bill2022/3/bg.png') no-repeat;
//   background: url('../assets/annual/7.jpg');
  background-size: 100% auto;
  background-position: center center;
  position: relative;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 3rem;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 5.765rem;
      height: 5.1875rem;
      display: none;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .love-img {
    position: absolute;
    width: 17.5rem;
    height: 17.75rem;
    top: 39%;
    left: 2.8rem;

    img {
      width: 100%;
      height: auto;
    }
  }

  .give-img {
    position: absolute;
    width: 18rem;
    height: 14rem;
    top: 48%;
    right: 2rem;

    img {
      width: 100%;
      height: auto;
    }
  }
}

.swiper-slide8 {
//   background: url('../assets/images/bill2022/5/bg.png') no-repeat;
//   background: url('../assets/annual/8.jpg');
  background-size: 100% auto;
  background-position: center center;
  position: relative;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;
    position: relative;
    z-index: 999;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide8-img {
    width: 100%;
    height: 58rem;
    // margin-top: 8.8rem;
    position: absolute;
    bottom: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }
}



.swiper-slide9 {
//     background: url('../assets/images/bill2022/5/bg.png') no-repeat;
//   background-size: 100% 100%;
//   background-position: center center;
  position: relative;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;
    position: relative;
    z-index: 999;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 25.125rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide8-img {
    width: 100%;
    height: 58rem;

    img {
      width: 100%;
      height: 100%;
    }
  }



  .swiper-slide9-box {
    width: 100%;
    height: 64.0625rem;
    position: absolute;
    bottom: 0;

    img {
      width: 100%;
    }

    .slide9-one {
      width: 100%;
      height: 100%;
    }

    .slide9-two {
      position: absolute;
      top: 30rem;
      left: 9.5rem;
      width: 28rem;
      height: 19rem;
    }

    .slide9-three {
      position: absolute;
      top: 31.8rem;
      left: 12rem;
      width: 23rem;
      height: 15.25rem;
    }

    .slide9-four {
      position: absolute;
      top: 34rem;
      left: 16rem;
      width: 15rem;
      height: 1rem;
    }
  }
}



.swiper-slide10 {
  background: url('../assets/images/bill2022/10y/bg.jpg');
  background-size: 100% 100%;
//   background-position: center center;
  position: relative;
  overflow: hidden;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide10-img {
    width: 100%;
    height: 62.5rem;
    margin-top: 6rem;

    // position: absolute;
    //     bottom: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}


.swiper-slide11 {
//   background: url('../assets/annual/11.jpg');
  background-size: 100% auto;
  background-position: center center;
  position: relative;
  overflow: hidden;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 15.0625rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide11-img {
    width: 100%;
    height: 71.6875rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}




.swiper-slide13 {
//   background: url('../assets/annual/13.jpg');
  background-size: 100% auto;
  background-position: center center;
  position: relative;

  .content-box-3 {
    width: 84vw;
    margin-left: 8vw;
    height: auto;
    margin-top: 3rem;
    text-align: left;

    p {
      color: #7e4f33;
      font-weight: 500;
      font-size: 2.3rem;
      margin-top: 24px;
      line-height: 3.4rem;

      i {
        font-size: 3rem;
        letter-spacing: 0.9px;
        color: #ff674f;
        font-family: 'blackitalic';
      }

      span {
        color: #ff674f;
      }
    }

    .time {
      width: 37.1875rem;
      height: 5.1875rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .swiper-slide13-img {
    width: 100%;
    height: 53.75rem;
    position: relative;
    margin-top: 8rem;

    img {
      width: 100%;
      height: auto;
    }

    .swiper-slide13-one {
      width: 18rem;
      height: 12.875rem;
      position: absolute;
      top: -5rem;
      right: 2rem;
    }

    .swiper-slide13-two {
      width: 15rem;
      height: 12.875rem;
      position: absolute;
      top: 13rem;
      left: 3rem;
    }

    .swiper-slide13-three {
      width: 13rem;
      height: 10.5rem;
      position: absolute;
      top: 26rem;
      right: 3rem;
    }

    .text-box-one {
      font-size: 2.3rem;
      color: #ffe6b8;
      position: absolute;
      top: 10.5rem;
      right: 11rem;
      font-weight: 500;

      span {
        font-size: 3rem;
        font-family: 'blackitalic';
      }

      .text {
        margin-top: .5rem;
      }
    }

    .text-box-two {
      font-size: 2.3rem;
      color: #ffe6b8;
      position: absolute;
      top: 29rem;
      left: 10.5rem;
      font-weight: 500;

      span {
        font-size: 3rem;
        font-family: 'blackitalic';
      }

      .text {
        margin-top: .5rem;
      }
    }

    .text-box-three {
      font-size: 2.3rem;
      color: #F64040;
      position: absolute;
      top: 41.2rem;
      right: 4.5rem;
      font-weight: 500;
      span {
        font-size: 3rem;
        font-family: 'blackitalic';
      }

      .text {
        margin-top: .5rem;
      }
    }
  }

}


.swiper-slide13-one-an {
  animation: scanning1 1s ease-in-out .2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes scanning1 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}

.swiper-slide13-two-an {
  animation: scanning2 1s ease-in-out .4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes scanning2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}

.swiper-slide13-three-an {
  animation: scanning3 1s ease-in-out .6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes scanning3 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}




.slide9-four-an {
  animation: scanning 1.5s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes scanning {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(10rem);
  }
}



.love-img-an {
  animation: love 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes love {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}

.give-img-an {
  animation: give 1s ease-in-out .4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes give {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}





.rank-an-1 {
  animation: rank1 .5s ease-out .3s forwards;
}

.rank-an-2 {
  animation: rank2 .5s ease-out .6s forwards;
}

.rank-an-3 {
  animation: rank2 .5s ease-out .9s forwards;
}

@keyframes rank1 {
  0% {
    transform: translateX(-13.75rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes rank2 {
  0% {
    transform: translateX(-15.625rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes rank3 {
  0% {
    transform: translateX(-17.8125rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.slide2-img1-an {
  animation: slide2Img1An 1s ease-in-out .2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.slide2-img2-an {
  animation: slide2Img2An 1s ease-in-out .4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.slide2-img3-an {
  animation: slide2Img3An 1s ease-in-out .6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.slide2-img4-an {
  animation: slide2Img4An 1s ease-in-out .8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.slide2-img5-an {
  animation: slide2Img5An 1s ease-in-out 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide2Img1An {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(1rem);
  }
}

@keyframes slide2Img2An {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(1.3rem);
  }
}

@keyframes slide2Img3An {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(1.2rem);
  }
}

@keyframes slide2Img4An {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(2rem);
  }
}

@keyframes slide2Img5An {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(2rem);
  }
}


.slide3-img2-an {
  animation: slide3Img2An 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@keyframes slide3Img2An {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(3rem);
  }
}




.swiper-slide12-one-an {
  animation: slide2Img4An 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.swiper-slide12-two-an {
  animation: slide2Img4An 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.swiper-slide12-three-an {
  animation: slide2Img4An 1s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide12Img2An {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(1.3rem);
  }
}


.text-box1-an {
  opacity: 0;
  animation: textBox1An 1s ease-in-out .1s forwards;
}

@keyframes textBox1An {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.text-box2-an {
  opacity: 0;
  animation: textBox2An 1s ease-in-out .5s forwards;
}

@keyframes textBox2An {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.text-box-an-top {
  opacity: 0;
  animation: textBoxAnTop 1s ease-in-out .3s forwards;
}

@keyframes textBoxAnTop {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);

  }
}